@@include('./_header.html', {
"title": "开始使用 - QMUI Web",
"currentPage": "start"
})
<div class="frame_sidebar" id="frame_sidebar">

    <div class="frame_sidebar_inner">

        <ul class="frame_sidebar_nav">
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_upgrade">更新</a>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_overview">概况</a>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_environment">环境配置</a>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_projectStructure">项目结构</a>
                <ul class="frame_sidebar_nav frame_sidebar_nav_Children">
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_imagesManage">图片文件管理</a>
                    </li>
                </ul>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_quickStart">快速开始</a>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_useFramework">框架的使用</a>
                <ul class="frame_sidebar_nav frame_sidebar_nav_Children">
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_configAndWidget">基础配置与组件</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_scaffold">内置工作流</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_SassSupport">Sass 支持</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_expandWidget">扩展组件</a>
                    </li>
                </ul>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_browserCompatibility">兼容性策略</a>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_frameworkImprove">完善框架</a>
                <ul class="frame_sidebar_nav frame_sidebar_nav_Children">
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_workflowDebug">内置工作流调试辅助</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_workflowLog">日志方法</a>
                    </li>
                </ul>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_createProject">创建新项目（高级）</a>
                <ul class="frame_sidebar_nav frame_sidebar_nav_Children">
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_mountFramework">挂载 QMUI 为 SVN 外部库</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_useConfig">使用配置文件</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_createCommand">执行创建新项目命令</a>
                    </li>
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_configUser">用户个人配置</a>
                    </li>
                </ul>
            </li>
            <li class="frame_sidebar_nav_item js_sidebar_group">
                <a class="frame_sidebar_nav_link" href="#qui_customTask">创建自定义任务（高级）</a>
                <ul class="frame_sidebar_nav frame_sidebar_nav_Children">
                    <li class="frame_sidebar_nav_item js_sidebar_item">
                        <a class="frame_sidebar_nav_link" href="#qui_createTask">如何创建自定义任务</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<div class="frame_cnt">

    <!-- 更新 start -->
    <div class="dm_column">

        <h2 id="qui_upgrade" class="dm_column_title">更新</h2>

        <p class="dm_column_tip">QMUI Web 目前以 Github Release 管理版本，使用<a href="#qui_quickStart">快速开始</a>安装 QMUI Web 的用户只需进入项目 UI_dev/qmui 目录执行 git pull 即可更新至最新版本。通过其他方式安装的用户可以直接在 <a href="https://github.com/Tencent/QMUI_Web/releases" target="_blank">Github</a> 中下载最新版本来进行更新。</p>

        <p class="dm_column_tip">QMUI 框架目前推出 3.0.0 版本，基于 Gulp 4 进行开发，重新梳理了框架的依赖包，能提供更稳定以及高效的工作流，并且集成了一套完整的 SVG Sprite 解决方案，可以方便地处理 SVG Sprite 的场景，同时对组件和工具方法也作出了一些优化。另外由于新版作出了大量的结构上的修改，因此与旧版本并不兼容，从旧版本升级到新版请浏览<a href="https://github.com/Tencent/QMUI_Web/releases/tag/3.0.0" target="_blank">这里</a>。</p>

    </div>
    <!-- 更新 end -->

    <!-- 概况 start -->
    <div class="dm_column">

        <h2 id="qui_overview" class="dm_column_title">概况</h2>

        <p class="dm_column_tip">QMUI Web 主要分为 project 和 qmui 两个文件夹，project 是我们实际编写项目内容的文件夹，分为 logic（业务代码） 和 widget（公共组件），为了保持 QMUI 的独立性，project 文件夹会被基于 Gulp 的工具复制一份到外层目录中使用，而不是直接修改 QMUI 目录中的版本。这个工具实际上也是 QMUI 提供的脚手架，会提供如雪碧图处理、include 模板功能、清理文件、压缩功能等便捷功能。</p>

        <p class="dm_column_tip">QMUI Web 遵循 <a href="./codeNorm.html" target="_blank" title="QMUI 编码规范">QMUI 编码规范</a>，因此框架中提供的样式除 Reset 外都以 qui_ 作开头，以充当框架的命名空间。业务上的样式也应该有自己的命名空间，例如本 Demo 中的样式的公共部分都以 dm_ 开头，各细致的业务就以业务的功能作开头（例如组件页面的非公共代码都以 widget_ 开头），从而以不同的命名空间划分不同的样式，避免样式的互相干扰。</p>

        <p class="dm_column_tip">除此以外，QMUI 封装了大量 Sass 方法供使用，另外还在 Demo 中以参考组件的形式收录了一些结构较复杂的扩展组件，供使用者参考。</p>


    </div>
    <!-- 概况 end -->

    <!-- 环境配置 start -->
    <div class="dm_column">

        <h2 id="qui_environment" class="dm_column_title">环境配置</h2>

        <p class="dm_column_tip">QMUI Web 基于 Gulp 和 Node.js，请确保安装 <a href="https://nodejs.org/" target="_blank">Node.js</a>（建议 14.0 或以上版本），并用以下命令全局安装
            Gulp：</p>

        <div class="dm_column_item">

            <div class="dm_column_item_info dm_column_item_info_Single">
                <div class="dm_column_item_info_code">
<pre><code class="bash">#全局安装 Gulp
npm install -g gulp-cli
</code></pre>
                </div>
            </div>

        </div>

    </div>
    <!-- 环境配置 end -->

    <!-- 项目结构 start -->
    <div class="dm_column">

        <h2 id="qui_projectStructure" class="dm_column_title">项目结构</h2>

        <p class="dm_column_tip">QMUI Web 对项目文件结构（UI 层相关文件）有一定的依赖，不同的项目中如果能有相似的文件结构，也能便于开发。推荐的文件结构如下：</p>

        <pre class="dm_column_tip">
项目根目录
├─public          // 静态资源目录，由 Gulp 生成
│  ├─js           // 静态资源 js 文件
│  ├─style        // 静态资源 UI 文件
│  │  ├─css       // 静态资源 css 文件
│  │  └─images    // 静态资源 images 文件
│  └─template     // 最终的模板目录，区别于静态模板基于原生 HTML，最终模板通常是用功能完备的模板引擎驱动
├─UI_dev          // 实际进行开发的样式目录
│  ├─project      // 项目相关 Sass 与 images 文件，由 Gulp 生成，请参考“<a href="#qui_createProject" title="创建新项目">创建新项目</a>”
│  │  ├─images    // 项目相关图片文件
│  │  ├─logic     // 项目相关逻辑样式
│  │  └─widget    // 项目相关公共组件样式
│  └─qmui_web     // <strong>QMUI Web 主源码应放置在这一层目录</strong>
├─UI_html         // 静态模板目录
└─UI_html_result  // 静态模板经 Gulp 处理后的版本，用于前端拼接最终的模板
</pre>

        <p class="dm_column_tip"><strong>这些目录 QMUI 会提供工具帮助完成创建，开发者并不需要手工创建这些目录。</strong></p>

        <p class="dm_column_tip">另外这些目录结构只是层次上要求如此，即不建议修改目录的层级，但目录名如果与其他模块或组件冲突，可以自行修改目录名，并同步修改 qmui.config.js 的相关设置（qmui.qmui.config.js 需要复制到 UI_dev 中修改，如果直接修改 QMUI 源码中的配置文件，会影响框架的独立性，详细请参考“<a href="#qui_useConfig" title="使用配置文件">使用配置文件”</a>）</p>

        <!-- 图片文件管理 start -->
        <div class="dm_column_item">

            <h3 id="qui_imagesManage" class="dm_column_item_title">图片文件管理</h3>
            <p class="dm_column_tip">为了解决 CSS Sprite 造成的重复劳动工作以及管理图片，QMUI 提供了一套图片文件管理的方案。图片文件统一放置在一个目录中（project/images），其中，需要做雪碧图的图片应该在 images 下建立子目录统一放置，QMUI 会根据相应的规则合成雪碧图，关于这一点的详细情况，请参考<a href="widget.html#qui_widget_autoSprite">这里</a>。而不需要做成雪碧图的独立图片，应该放置在 images/independent（由 qmui.config.js 中的 independentImagesDirectory 选项控制）目录中，该目录中也可以再建立子目录。另外，无论是雪碧图还是独立图片，QMUI 都会统一管理这些图片，输出到静态资源目录（public/style/images），并自动进行图片压缩。</p>
        </div>
        <!-- 图片文件管理 end -->
    </div>
    <!-- 项目结构 end -->

    <!-- 快速开始 start -->
    <div class="dm_column">
        <h2 id="qui_quickStart" class="dm_column_title">快速开始</h2>
        <p class="dm_column_tip">如果需要的环境已经配置好，那么就可以正式创建一个新项目了。</p>
        <p class="dm_column_tip">推荐使用 <a href="http://yeoman.io/" target="_blank">Yeoman</a> 脚手架 <a
            href="https://github.com/QMUI/generator-qmui" target="_blank">generator-qmui</a> 安装和配置 QMUI Web。该工具可以帮助你完成 QMUI Web 的所有安装和配置。</p>

        <div class="dm_column_item_info dm_column_item_info_Single">
            <div class="dm_column_item_info_code">
<pre><code class="bash">#安装 Yeoman，如果本地已安装可以忽略
npm install -g yo
#安装 QMUI 的模板
npm install -g generator-qmui
#在项目根目录执行以下命令
yo qmui
</code></pre>
            </div>
        </div>

        <p class="dm_column_tip">
            <img src="../public/style/images/independent/Generator.gif" alt="generator-qmui 效果图"/>
        </p>

        <p class="dm_column_tip">对于需要有更强定制性的开发者，请参考<a href="#qui_createProject">创建新项目（高级）</a></p>

    </div>
    <!-- 快速开始 end -->

    <!-- 框架的使用 start -->
    <div class="dm_column">

        <h2 id="qui_useFramework" class="dm_column_title">框架的使用</h2>

        <p class="dm_column_tip">作为一个框架，QMUI Web 主要提供了四种能力来提升 UI 开发的效率与质量。<strong>分别用于快速实现项目 UI，快速解决重复劳动力工作，CSS 的预处理和复杂的组件参考四个方面，这也是 QMUI Web 的使用目标。</strong></p>

        <!-- 基础配置与组件 start -->
        <div class="dm_column_item">

            <h3 id="qui_configAndWidget" class="dm_column_item_title">基础配置与组件</h3>

            <div class="dm_column_tip">框架中会有一份配置表，是各种 Sass 的变量，这些变量控制了一个网页基本的字体样式，链接颜色，以及6个通用组件的样式配置，在创建一个新项目时，应该先根据设计稿配置好这些信息，<strong>当这些信息配置完成，那么一个项目的基本样式就可以快速实现了。</strong>例如下图中这些配置属于 QMUI 通用配置，通过修改这些配置则可以快速修改项目的字体策略、正文字体大小，链接颜色等 UI 常用的 CSS 属性。
            </div>

            <div class="dm_column_tip">
                <img src="../public/style/images/independent/Var.png" alt="基础配置与组件"/>
            </div>

        </div>
        <!-- 基础配置与组件 end -->

        <!-- 内置工作流 start -->
        <div class="dm_column_item">

            <h3 id="qui_scaffold" class="dm_column_item_title">内置工作流</h3>

            <div class="dm_column_tip">QMUI 中的内置工作流由 Gulp 驱动，用于快速解决大量重复劳动力的工作，从而提升效率。QMUI 的 Gulp 中预先实现了监控 Sass 文件并自动编译，样式优化（浏览器兼容自动处理等），雪碧图处理，模板 include 能力（可以传参和使用条件判断），浏览器自动刷新，图片压缩，文件清理，文件合并以及自动变更路径的能力。各个命令都是在 qmui_web 文件夹中调用对应的 gulp 命令即可，部分命令依赖于 qmui.config.js 的配置。具体命令列表及功能可以参考<a href="./scaffold.html">内置工作流</a>页面。
            </div>

            <div class="dm_column_tip">
                <img src="../public/style/images/independent/Gulp.gif" alt="Gulp 任务效果图"/>
            </div>

        </div>
        <!-- 内置工作流 end -->

        <!-- Sass start -->
        <div class="dm_column_item">

            <h3 id="qui_SassSupport" class="dm_column_item_title">Sass 增强支持</h3>

            <div class="dm_column_tip">QMUI 中提供了大量基于 Sass 的 CSS 预处理的方法，包括 CSS Reset，一些常见的 CSS 类（例如清除浮动），计算长度值的简便方法（例如获取 padding 在某个方向的值，计算两个长度值的中间值），快速实现一些样式效果的工具方法（例如实现 border 三角形，适应多倍屏幕的 1px 边框等）。这些都是<strong>用于提高样式开发的效率和质量。</strong>详细请参考<a href="./tools.html">工具方法</a>页面。
            </div>

        </div>
        <!-- Sass 支持 end -->

        <!-- 扩展组件 start -->
        <div class="dm_column_item">

            <h3 id="qui_expandWidget" class="dm_column_item_title">扩展组件</h3>

            <div class="dm_column_tip">扩展组件并不是由 QMUI Web 的主源码提供，而是由 Demo 提供，通常是因为这类组件结构较复杂，因此业务性无法很好地剥离，从而不能抽取成公共组件，因此这类组件就放在了 Demo 页，<strong>以参考组件的形式帮助开发。</strong>详情可以看<a href="./widget.html#qui_widgetExpand" title="扩展组件列表">这里</a>。
            </div>

        </div>
        <!-- 扩展组件 end -->

    </div>
    <!-- 框架的使用 end -->

    <!-- 兼容性策略 start -->
    <div class="dm_column">

        <h2 id="qui_browserCompatibility" class="dm_column_title">兼容性策略</h2>

        <p class="dm_column_tip">QMUI 提供的几个能力里面，内置工作流基于 Node.js，因此与浏览器兼容无关。而 QMUI 提供的 Sass 方法、公共组件支持 IE9+。扩展组件由于是从不同的业务中抽取，因此对浏览器的支持并没有统一的标准，请参考每个扩展组件的标注。</p>

    </div>
    <!-- 兼容性策略 end -->

    <!-- 完善框架start -->
    <div class="dm_column">

        <h2 id="qui_frameworkImprove" class="dm_column_title">完善框架</h2>

        <p class="dm_column_tip">如果有意见反馈或者功能建议，欢迎创建 <a href="https://github.com/Tencent/QMUI_Web/issues" target="_blank">Issue</a> 或发送 <a href="https://github.com/Tencent/QMUI_Web/pulls" target="_blank">Pull Request</a>，感谢你的支持和贡献。</p>

        <!-- 内置工作流调试辅助 start -->
        <div class="dm_column_item">

            <h3 id="qui_workflowDebug" class="dm_column_item_title">内置工作流调试辅助</h3>

            <p class="dm_column_tip">当 QMUI Web 工作流在工作时，会自动检测工作流源码是否有更新并在有更新时发出通知，包括日志通知以及声音通知。</p>

            <p class="dm_column_tip">另外为了方便调试，QMUI Web 带有 Debug 模式，通过 Debug 模式开启工作流后，当 QMUI Web 检测到工作流源码有更新时会发出通知并自行重启工作流，方便调试。</p>

            <div class="dm_column_item_info dm_column_item_info_Single">
                <div class="dm_column_item_info_code">
            <pre><code class="bash">#在 qmui_web 目录中执行以下命令可以开启 Debug 模式工作流
gulp --debug</code></pre>
                </div>
            </div>

        </div>
        <!-- 内置工作流调试辅助 end -->

        <!-- 日志方法 start -->
        <div class="dm_column_item">

            <h3 id="qui_workflowLog" class="dm_column_item_title">日志方法</h3>

            <p class="dm_column_tip">修改 QMUI Web 工作流时，应当使用 QMUI 提供的公共日志方法而不是 console：</p>

            <div class="dm_column_item_info dm_column_item_info_Single">
                <div class="dm_column_item_info_code">
            <pre><code class="javascript">// 示例
common.log('Tag', '普通消息')
common.warn('Tag', '警告消息')
common.error('Tag', '错误消息')</code></pre>
                </div>
            </div>

        </div>
        <!-- 内置工作流调试辅助 end -->

    </div>
    <!-- 完善框架end -->

    <!-- 创建新项目（高级） start -->
    <div class="dm_column">

        <h2 id="qui_createProject" class="dm_column_title">创建新项目（高级）</h2>

        <p class="dm_column_tip">对于需要有更强定制性的开发者，可以采取自行配置的方式引入 QMUI Web。自行配置的方式适用于需要修改项目目录名等定制性较强的情况。如果使用这种开发方式，那么项目中的目录结构需要手工创建，但目录名可以自行取名，只需要修改配置表即可（下面会介绍如何使用配置表）。</p>

        <!-- 挂载 QMUI 为 SVN 外部库 start -->
        <div class="dm_column_item">

            <h3 id="qui_mountFramework" class="dm_column_item_title">挂载 QMUI 为 SVN 外部库</h3>

            <p class="dm_column_tip">创建项目的第一步，是引入 QMUI 的框架文件，建议采取 Git submodule 或 SVN 外部库的方式引入，这是希望把 QMUI 的源码修改与项目源码修改隔离开，达到互不干扰的效果。根据上面的项目结构要求，QMUI 框架应该引入到 <strong>UI_dev/qmui_web</strong> 目录中（如果 UI_dev 也可以修改为其他名称，这里只是要求目录层级如此）。</p>

            <p class="dm_column_tip">QMUI 采用 npm 进行 node 包管理，因此你还需要使用 npm 安装 QMUI 依赖的 node 包，请在 UI_dev/qmui_web 目录下执行以下命令（<strong>QMUI Web 所有相关命令都在 qmui_web 目录下执行</strong>）：</p>

            <div class="dm_column_item_info dm_column_item_info_Single">
                <div class="dm_column_item_info_code">
            <pre><code class="bash">#使用 npm 安装依赖包，待安装完毕后才可继续进行下一步
npm install</code></pre>
                </div>
            </div>

        </div>
        <!-- 挂载 QMUI 为 SVN 外部库 end -->

        <!-- 使用配置文件 start -->
        <div class="dm_column_item">

            <h3 id="qui_useConfig" class="dm_column_item_title">使用配置文件</h3>

            <p class="dm_column_tip">在 qmui_web（QMUI Web 框架根目录）中，有一个配置文件 qmui.config.js，<strong>在项目开始之前应该把配置文件复制到 qmui_web 的上一层目录（按推荐的文件结构，应该是 UI_dev 目录）</strong>，用于框架在 Gulp 这一层的配置。</p>
            <p class="dm_column_tip">具体地说，qmui.config.js 配置 Gulp 在使用时的一些依赖的变量，如果开发时使用的就是框架所推荐的文件结构，那么基本上只需要配置 <code>project</code> 和 <code>prefix</code> 两个参数即可。详细的配置选项如下：</p>

            <div class="dm_column_tip">
                <ul>
                    <li><code>project</code> 项目名称，暂时没有被实际用到，只是预留接口</li>
                    <li><code>prefix</code> 代码前缀，用于在样式和 HTML 中创建 class 的命名前缀，即命名空间，必须根据项目名称定好一个清晰不容易与其他项目冲突的前缀</li>
                    <li><code>resultCssFileName</code> 项目主样式文件的名称，在创建新项目时会被用到，一般来说，QMUI 建议如果项目不是非常大的量级，都只使用一个样式表，方便代码管理</li>
                    <li><code>cleanFileType</code> 执行 gulp clean 命令时需要清除的文件</li>
                    <li><code>needsSourceMaps</code> 是否需要支持 Css Source Maps。</li>
                    <li><code>needsImagesMinAndSync</code> 是否需要压缩图片功能。</li>
                    <li><code>browserSyncMod</code> BrowserSync 的运行模式，默认为 'server'，即本地服务器模式，'proxy' 为代理模式，'close' 表示不开启本功能。
                    </li>
                    <li><code>browserSyncPort</code> 自定义端口，默认为3030。请注意避免使用常用端口以及其他本地已占用的端口，包括在代理模式（proxy）下不能与代理对象使用相同的端口。</li>
                    <li><code>browserSyncShowLog</code> 是否在显示 BrowserSync 的日志，默认为 false，即不显示日志。</li>
                    <li><code>browserSyncStartPath</code> 开启 BrowserSync 后的默认打开的路径。</li>
                    <li><code>browserSyncHost</code> 自定义开启 BrowserSync 后的默认 IP，可填写域名。为空则默认为 localhost。开启 BrowserSync 后，浏览器地址栏会自动打开 browserSyncHost + browserSyncStartPath 合并后的网址。</li>
                    <li><code>browserSyncWatchPath</code> 要监控变动的文件目录，一旦该目录下文件产生变动则自动刷新浏览器。</li>
                    <li><code>browserSyncServerRoute</code> 自定义路由，把项目中的目录结构定义成指定的路由，本地服务器模式（server）下方可产生作用。</li>
                    <li><code>browserSyncProxy</code> 需要进行代理的代理地址，代理模式（proxy）下方可产生作用。</li>
                    <li><code>htmlSourcePath</code> 静态模板来源目录，即模板开发的目录</li>
                    <li><code>imagesSourcePath</code> 图片文件来源目录，即图片开发的目录</li>
                    <li><code>htmlResultPath</code> 静态模板经 Gulp 处理后输出的目录，即把 include 合并后的输出版本</li>
                    <li><code>imagesResultPath</code> 图片文件经 Gulp 处理后输出的目录，即最终实际被项目使用的图片资源</li>
                    <li><code>independentImagesDirectory</code> 独立图片的开发目录的目录名，QMUI 会根据这个目录名在 imagesSourcePath 目录中生成一个子目录</li>
                    <li><code>styleResultPath</code> 样式表经 Gulp 处理后输出的目录</li>
                    <li><code>openIncludeFunction</code> 是否开启模板 include 引擎，默认开启</li>
                    <li><code>includePrefix</code> include 引擎所使用的前缀，它影响了所有 include 方法的使用，默认为 @@</li>
                </ul>
            </div>

            <p class="dm_column_tip">其中 <code>htmlSourcePath</code> <code>imagesSourcePath</code>
                <code>htmlResultPath</code> <code>imagesResultPath</code> <code>browserSyncWatchPath</code> <code>browserSyncServerRoute</code>
                <strong>这六个选项都是项目资源的路径配置选项，若要修改，请注意相对路径是以 qmui_web 目录为 Base Path。</strong></p>

        </div>
        <!-- 使用配置文件 end -->

        <!-- 执行创建新项目命令 start -->
        <div class="dm_column_item">

            <h3 id="qui_createCommand" class="dm_column_item_title">执行创建新项目命令</h3>

            <p class="dm_column_tip">最后一步就是执行创建新项目的命令，只需在 qmui_web 目录下执行一句命令。项目创建完毕后控制台会有提示。</p>

            <div class="dm_column_item_info dm_column_item_info_Single">
                <div class="dm_column_item_info_code">
                    <pre><code class="bash">gulp init</code></pre>
                </div>
            </div>

            <p class="dm_column_tip">
                <img src="../public/style/images/independent/CreateProject.png" alt="创建新项目成功效果图"/>
            </p>

        </div>
        <!-- 执行创建新项目命令 end -->

        <!-- 用户个人配置 start -->
        <div class="dm_column_item">

            <h3 id="qui_configUser" class="dm_column_item_title">用户个人配置</h3>

            <p class="dm_column_tip">考虑到每位开发者可能有自己的开发习惯，因此除了项目中的 qmui.config.js，QMUI 还支持每位开发者在本地建立个人的配置表，例如项目中的 qmui.qmui.config.js 的 <code>needsSourceMaps</code> 被统一设置为 true，因此这时所有开发这个项目的成员都会默认使用 Source Maps 的功能，但项目成员中有开发者希望关闭这个功能，那么这位成员可以在 qmui.qmui.config.js 平级建立一个 config.user.js 文件，把 <code>needsSourceMaps</code> 设置为 false，那么 QMUI 会优先以 config.user.js 中的值为准。需要注意的是，config.user.js 应当在本地建立和使用，不应该提交到版本管理中，否则也会影响其他项目成员。</p>

        </div>
        <!-- 用户个人配置 end -->

    </div>
    <!-- 创建新项目（高级） end -->

    <!-- 创建自定义任务（高级） start -->
    <div class="dm_column">
        <h2 id="qui_customTask" class="dm_column_title">创建自定义任务（高级）</h2>

    <p class="dm_column_tip">QMUI Web 支持在内置工作流原有任务的基础上增加自定义的任务，通过特定的格式建立任务文件，可以调用 QMUI Web 工作流中的公共配置和组件来编写自定义任务，适用于需要针对项目添加额外的流程。</p>

        <!-- 如何创建 start -->
        <div class="dm_column_item">

            <h3 id="qui_createTask" class="dm_column_item_title">如何创建自定义任务</h3>

            <p class="dm_column_tip">对 QMUI Web 来说，创建自定义任务只需要在配置文件（UI_dev/qmui.config.js）中增加 <code>customTasks</code> 字段，传入自定义任务的任务名和所在的 JavaScript 文件的相对路径即可（相对 qmui_web 目录），例如：</p>

            <pre class="dm_column_tip">
UI_dev
├── qmui.config.js
├── project
├── qmui_web
└── testTask.js
            </pre>

            <div class="dm_column_item_info dm_column_item_info_Single">
                <div class="dm_column_item_info_code">
<pre><code class="bash">// qmui.config.js
module.exports = {
    /**
     * 模板 include 引擎
     *
     */
    'template': {
        'openIncludeFunction': true,
        'includePrefix': '@@'
    },

    /**
     * 增加自定义任务
     */
    'customTasks': {
        'testTask': '../testTask.js'
    }
};</code></pre>
                </div>
            </div>

            <div class="dm_column_item_info dm_column_item_info_Single">
                <div class="dm_column_item_info_code">
<pre><code class="bash">// testTask.js
module.exports = (gulp, mix) => {

    const taskName = 'testTask';

    gulp.task(taskName, done => {

        // Custom task logic code
        mix.util.log('testTask execute succeed');

        done();
    });

    // Task Description (For gulp list)
    mix.addTaskDescription(taskName, 'Custom Task testTask');
};</code></pre>
                </div>
            </div>

            <p class="dm_column_tip">
                如上面的示例中的 testTask.js，自定义任务需要按照特定的格式编写，这样自定义任务才可以接入 QMUI Web 的内置工作流，并可以使用内置工作流中的公共配置和组件，为了方便开发者创建自定义任务，QMUI 的 Yeoman 脚手架 generator-qmui 增加了自定义任务的子模板，可以快速创建符合规范的自定义任务文件，例如：
            </p>

            <div class="dm_column_item_info dm_column_item_info_Single">
                <div class="dm_column_item_info_code">
<pre><code class="bash">#安装 Yeoman，如果本地已安装可以忽略
npm install -g yo
#安装 QMUI 的模板，如果本地已安装可以忽略
npm install -g generator-qmui
#在需要创建自定义任务文件的目录执行以下命令
yo qmui:task fileName;</code></pre>
                </div>
            </div>

        </div>
        <!-- 如何创建 end -->
    </div>
    <!-- 创建自定义任务（高级） end -->

</div><!-- content end -->

@@include('./_footer.html')
